Collecting customer data
In the context of a custom checkout experience, collecting and handling customer information is a critical aspect. In this guide, we will be using the Afosto Storefront JavaScript client to gather and process data such as customer contact information, shipping and billing details.
Contact
The first step involves defining the necessary information about the customer. The required fields include email, givenName, familyName, and isGuest, with additionalName being optional.
1const contactData = {
2 email: 'customer@afosto.com',
3 isGuest: true,
4 givenName: 'John',
5 additionalName: 'Michael',
6 familyName: 'Appleseed',
7};If you're dealing with an existing customer, you can use their ID instead of the contact object.
Organisation
For business orders, an organisation entity may also be added to the customer. This requires the name, isGuest and administration.email fields, with ccNumber and registration fields being optional.
1const organisationData = {
2 name: 'Afosto',
3 isGuest: true,
4 administration: {
5 email: 'organisation@afosto.com',
6 },
7 ccNumber: '123456789',
8 registration: {
9 countryCode: 'NL',
10 number: 'NL123B456789',
11 }
12};Phone number
Next, we can add a phone number to the customer and the cart.
1const phoneNumberData = {
2 countryCode: 'NL',
3 number: '0507119519',
4};Shipping address
The final piece of data to be collected is the shipping and billing address. Both addresses share the same format and include the required fields: countryCode, locality, postalCode, addressLine1, thoroughfare, and premiseNumber.
1const shippingAddressData = {
2 countryCode: 'NL',
3 locality: 'Groningen',
4 administrativeArea: 'Groningen',
5 postalCode: '9723JA',
6 addressLine1: 'Kieler Bocht 15C',
7 addressLine2: null,
8 premiseNumber: '15',
9 premiseNumberSuffix: 'C',
10 thoroughfare: 'Kieler bocht',
11 givenName: 'John',
12 additionalName: 'Michael',
13 familyName: 'Appleseed',
14 organisation: 'Afosto',
15};Billing address
You can reuse the same object for the billing address or define a different address.
1const billingAddressData = {
2 ...shippingAddressData,
3 // or define a different address with the same fields
4};Add information to cart
With this data stored, it's time to create a GraphQL mutation to add the information to the cart. This mutation combines multiple operations such as creating a customer, adding a phone number, and assigning shipping and billing addresses. Although these mutations are combined in this example, they can be used separately.
The example below illustrates how to merge the collected data into a single mutation.
1import StorefrontClient, { gql, CoreCartFragment } from '@afosto/storefront';
2
3const client = StorefrontClient({
4 storefrontToken: 'STOREFRONT_TOKEN',
5});
6
7// get the cart id from the search params
8const params = new URL(document.location).searchParams;
9const cartId = params.get('cart_id');
10
11const contactData = {
12 // contact data
13};
14const organisationData = {
15 // organisation data
16};
17const phoneNumberData = {
18 // phone number data
19};
20const shippingAddressData = {
21 // shipping address data
22};
23const billingAddressData = {
24 // billing address data
25}
26
27// Combine the addresses into an object for easy reuse
28const addressingData = {
29 billing: billingAddressData,
30 shipping: shippingAddressData,
31};
32
33// merge data
34
35 into the contact and organisation and combine
36// contact and organisation into a customer object.
37const customerData = {
38 contact: {
39 ...contactData,
40 phoneNumber: phoneNumberData,
41 },
42 organisation: {
43 ...organisationData,
44 phoneNumber: phoneNumberData,
45 },
46};
47
48const variables = {
49 customerInput: { cartId, customer: customerData },
50 phoneNumberInput: { cartId, phoneNumber: phoneNumberData },
51 shippingAddressInput: { address: shippingAddressData, cartId, type: 'ADDRESS' },
52 billingAddressInput: { address: billingAddressData, cartId },
53 // optional fields to use for fetching pickup points in the return data
54 countryCode: billingAddressData?.countryCode,
55 postalCode: billingAddressData?.postalCode,
56};
57
58const query = gql`
59 mutation AddInformationToCart(
60 $customer_input: AddCustomerToCartInput!
61 $phone_number_input: AddPhoneNumberToCartInput!
62 $shipping_address_input: AddShippingAddressToCartInput!
63 $billing_address_input: AddBillingAddressToCartInput!
64 $country_code: String!
65 $postal_code: String!
66 ) {
67 addCustomerToCart(input: $customer_input) {
68 cart {
69 id
70 }
71 }
72 addPhoneNumberToCart(input: $phone_number_input) {
73 cart {
74 id
75 }
76 }
77 addShippingAddressToCart(input: $shipping_address_input) {
78 cart {
79 id
80 }
81 }
82 addBillingAddressToCart(input: $billing_address_input) {
83 cart {
84 options {
85 shipping {
86 methods {
87 id
88 name
89 description
90 instruction
91 carrier
92 is_pickup_point
93 pickup_points(country_code: $country_code, postal_code: $postal_code) {
94 id
95 name
96 carrier
97 distance
98 address {
99 country_code
100 administrative_area
101 locality
102 postal_code
103 address_line_1
104 thoroughfare
105 premise_number
106 premise_number_suffix
107 }
108 }
109 pricing {
110 fixed
111 percentage
112 }
113 }
114 }
115 }
116 shipping {
117 method {
118 id
119 }
120 }
121 ...CoreProjectionFields
122 }
123 }
124 }
125`;
126
127const response = await client.query(query, variables);And there you have it. With the Afosto Storefront JavaScript client, collecting and managing customer information becomes a simple and streamlined process.